<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="css/chapter1.css"/>
</head>
<body>
    <pre>
        Bootstrap：基于HTML、CSS、Javascript的一个简洁、灵活的开源框架
        搭建环境：引入Bootstrap.js / Bootstrap.css
        理想视口：内容的显示以设备的高宽当做显示区域为主 name="viewport"
        栅格系统：通过一系列的行（row）与列（column）的组合来创建页面的布局
                 定义容器的大小，平分为12份
        12等分栅格布局：
             一行row必须包在.container的容器中。
            栅格系统使用分：
                列组合：合并列
                列偏移：对列做偏移移动
                列嵌套：列嵌套列
                列排序：对列做排序
        CSS布局，是Bootstrap三大核心内容的基础
        基础排版：
            对网页标签重新定义了样式[直接写标签就使用bootstrap定义的样式]
                标题标签
                字体
            文本强调元素：small、strong、em
            对齐方式：text-left左对齐
                     text-center居中
                     text-right右对齐
                     text-justify两端对齐
            列表：内联列表、水平定义列表
            表单：内联表单 横向表单 验证提示状态 控件大小
            控件大小：大型输入框 小型输入框
            按钮样式：
            图片：响应式图片  图片形状

        媒体查询：
            css会自动根据栅格的宽度调整使用的CSS样式

               
    </pre>
    <div class="container">
        <div class="row">
              <div class="col-xs-1 col-lg-1 bk">1</div>
              <div class="col-xs-1 col-lg-1 bk">2</div>
              <div class="col-xs-1 col-lg-1 bk">3</div>
              <div class="col-xs-1 col-lg-1 bk">4</div>
              <div class="col-xs-1 col-lg-1 bk">5</div>
              <div class="col-xs-1 col-lg-1 bk">6</div>
              <div class="col-xs-1 col-lg-1 bk">7</div>
              <div class="col-xs-1 col-lg-1 bk">8</div>
              <div class="col-xs-1 col-lg-1 bk">9</div>
              <div class="col-xs-1 col-lg-1 bk">10</div>
              <div class="col-xs-1 col-lg-1 bk">11</div>
              <div class="col-xs-1 col-lg-1 bk">12</div>
        </div>
    </div>
    
    <!-- 一个container容器就是一行 -->
    <div class="container">
        <!-- 列组合 -->
        <div>列组合</div>
        <div class="row">
              <div class="col-lg-4 bk">1</div>
              <div class="col-lg-4 bk">2</div>
              <div class="col-lg-4 bk">3</div>
        </div>
        <!-- 列偏移 -->
        <div>列偏移</div>
        <div class="row">
            <div class="col-lg-4 bk">1</div>
            <div class="col-lg-4 col-lg-offset-1 bk">2</div>
        </div>
        <!-- 列嵌套 -->
        <div>列嵌套</div>
        <div class="row">
            <div class="col-lg-9 bk">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-1 bk">x</div>
                    <div class="col-sm-5 bk">y</div>
                </div>
            </div>
            <div class="col-lg-3 bk">2</div>
        </div>
        <!-- 列排序 -->
        <div>列排序</div>
        <div class="row">
            <div class="col-lg-8 col-lg-push-4 bk">1</div>
            <div class="col-lg-4 col-lg-pull-8 bk">2</div>
        </div>
          
    </div>
    <br/>
    <br/>

    <!--
    < ! - - 一个container容器就是一行 - - >
    <div class="container">
        <div class="row">
            <div class="col-sm-4 kz">
                通用口语
            </div>
            <div class="col-sm-4 kz">
                海外考试
            </div>
            <div class="col-sm-4 kz">
                青少英语
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 kz">
                行业英语
            </div>
            <div class="col-sm-4 kz">
                旅游英语
            </div>
            <div class="col-sm-4 kz">
                面试英语
            </div>
        </div>
    </div>
    
    <br/>
    <br/>
    < ! - - 一个container容器就是一行 - - >
    <div class="container">
        <div class="row first">
            <div class="col-xs-4 hz">
                通用口语
            </div>
            <div class="col-xs-4 hz">
                海外考试
            </div>
            <div class="col-xs-4 hz">
                青少英语
            </div>
        </div>
        <div class="row second">
            <div class="col-xs-4 hz">
                行业英语
            </div>
            <div class="col-xs-4 hz">
                旅游英语
            </div>
            <div class="col-xs-4 hz">
                面试英语
            </div>
        </div>
    </div>
    -->

    <h1>这个标签<h1>
    <p >这是普通段落</p>
    <p class="lead">这是强调段落</p>
    <p class="small">这是段落</p>
    <small>这是small</small>
    <strong>加粗</strong>
    <div class="text-justify" style="width: 500px; border:1px red solid">
        两端对齐123两端对齐 两端对齐,两端对齐
    </div>

    <br/>
    <ul class="list-inline">
        <li>首页</li>
        <li>岗位课</li>
        <li>商城</li>
        <li>关于我们</li>
    </ul>
    <br/>

    <dl class="dl-horizontal">
        <dt>购物指南</dt>
        <dd>购物流程、会员价格</dd>
        <dt>配送方式</dt>
        <dd>上门自提、海外配送</dd>
        <dt>售后服务</dt>
        <dd>售后政策、价格保护、退款说明、取消订单、退换货</dd>
    </dl>
    
    <br/>

    <!-- <div style="width: 300px;"> -->
    <form action="#" class="form-inline">
    <!-- <form action="#" class="form-horizontal"> -->
        <div class="form-group" style="font-size: 20px;">
            姓名：<input class="form-control" type="text" id="xm" />
        </div>
        <div class="form-group has-error">
            邮箱：<input class="form-control" type="email" />
        </div>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入要搜索的内容" >
            <span class="input-group-addon" >百度一下</span>
        </div>
        <input class=" form-control " type="submit" value="提交" />
    </form>
    <!-- </div> -->
    <br/>

    <input type="text" class="input-lg form-control" placeholder="大型输入框"/>
    <input type="text" class="form-control" placeholder="正常输入框"/>
    <input type="text" class="input-sm form-control" placeholder="小型输入框"/>
    <br/>

    <input type="button" class="btn btn-default" value="default(灰色)"/>
    <input type="button" class="btn btn-primary" value="primary(深蓝色)"/>
    <input type="button" class="btn btn-success" value="success(绿色)"/>
    <input type="button" class="btn btn-info" value="info(天蓝色)"/>
    <input type="button" class="btn btn-warning" value="warning(黄色)"/>
    <input type="button" class="btn btn-danger" value="danger(红色)"/>
    <input type="button" class="btn btn-link" value="link(链接)"/>

    <br/>

    <div style="height: 95px; width: 165px; border: 1px red solid;">
        <img src="img/1.jpg" class="img-responsive" />
    </div>

    <br/>
    <img src="img/1.jpg" class="img-rounded " height="150" width="150" alt=""/>
    <img src="img/1.jpg" class="img-circle " height="150" width="150" alt=""/>
    <img src="img/1.jpg" class="img-thumbnail " height="150" width="150" alt=""/>

    <br/>
    <br/>

    <div style="border:1px red solid; height:100px; width:150px">
        媒体查询设置背景颜色
    </div>

    <br/>
    <br/>
    <br/>
    <br/>

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/chapter1.js"></script>
</body>
</html>